
<template>
    <div :id="'chart' + eIndex" ref="chartRef" :style="chartStyle"></div>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';

const props = defineProps({
    eIndex: {
        type: Number || String,
        default: ''
    },
    options: {
        type: Object,
        required: true,
    },
    chartStyle: {
        type: Object,
        default: () => {
            return {
                width: '100%',
                height: '300px'
            }
        }
    }
});
let { eIndex, options, chartStyle } = props;

const chartRef = ref<HTMLDivElement | null>(null);

onMounted(() => {

});

watch(() => options, () => {
    if (chartRef.value) {
        const chart = echarts.init(chartRef.value);
        chart.setOption(props.options);
    }
}, { deep: true, immediate: true })

</script>

<style>
.chart {
    height: 300px;
}
</style>